<template>
    <div>
       <div class="auth-box">
            <div class="auth">
                <div class="auth-head flex flex-align-center">
                    <p class="flex-1">设置权限</p>
                    <img src="@/assets/img/common/close.png" alt="" @click="onClosefn">
                </div>
                <!-- 返回选择成员 -->
                <div class="add-box" @click="onAddfn">
                    <img src="@/assets/img/filepanel/add.png" alt="">
                    选择公司成员
                </div>
                <!-- 成员列表 -->
                <div class="list-box">
                    <div class="item flex" v-for="(item,index) in AuthUserList" :key='index'>
                        <div class="name-box">
                            {{item.name}}
                        </div>
                        <div class="tips-box" v-if='item.email'>
                            {{item.email}}
                        </div>
                        <div class="tips-box" v-else>
                            {{item.man_nums}}人
                        </div>
                        <div class="auth-item-box" >
                            <span @click.stop="onAuthChebox_show(index,item)"> 
                                <span v-if="!item.is_customize">{{RolesNames.folder_group_roles[item.permissions]}}</span>
                                <span v-else>自定义</span>
                                <img src="@/assets/img/common/xiangxia.png" class="imgfz" :class="{imgactive:is_authChebox === index}" >
                            </span>
                            <authChebox :menu_data='menu_data' :auth_type='type' :child_item='child_item' :child_data='child_data' v-if="is_authChebox === index"/>
                        </div>
                        <div class="del-box" @click="delAuthUserList(item)">删除</div>
                    </div>
                </div>
                <!-- 按钮 -->
                <!-- 按钮组 -->
                <div class="btn-group flex">
                    <div class="btn" @click="onAuthorizefn">授权</div>
                    <div class="btn" @click="onClosefn">取消</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import authChebox  from './authChebox'
export default {
     components: {
        authChebox
    },
    computed: {
        AuthUserList(){
            return this.$store.getters.getAuthUserList
        }
    },
    data () {
        return {
            is_authChebox:'', // 是否显示下一步窗口
            menu_data:[], // 非自定义权限字段
            child_data:[], // 自定义权限字段
            RolesNames:{}, // 所有权限字段
            child_item:{}, // 传入到子组件数据
            type:"set_auth", // 传递子组件，判断是何处引用该组件
        }
    },
    mounted () {
        this.getfolderRolesNames();
    },
    methods: {

        // 关闭窗口
        onClosefn(){
            this.$emit('close');
        },

        // 打开设置成员窗口
        onAddfn(){
            this.$emit('add');
        },

          // 删除新添加授权用户列表
        delAuthUserList(item){
            var root = this.AuthUserList;
                var index = root.indexOf(item)
                if (index > -1) {
                        root.splice(index, 1);
                };
                this.$store.commit('setAuthUserList',root);
        },

        // 显示点击用户的权限设置框
        onAuthChebox_show(i,item){
            if(i != this.is_authChebox || this.is_authChebox === ''){
                this.is_authChebox = i;
                this.child_data = [];
                this.menu_data = [];
                // 设置权限窗口 初始化
                var RolesNames = JSON.parse(localStorage.RolesNames);
                for(var i in RolesNames.folder_group_roles){
                    var obj = new Object();
                    obj.name = RolesNames.folder_group_roles[i];
                    obj.key = i;
                    this.menu_data.push(obj);
                }
                for(var i in RolesNames.custom_permissions){
                    var obj = new Object();
                    obj.name = RolesNames.custom_permissions[i];
                    obj.key = i;
                    obj.status = false;
                    this.child_data.push(obj);
                }
                // 将当前id传入到子组件
                this.child_item = item;
            }else{
                //待处理，修改用户权限，拼装数据
                this.is_authChebox = '';
            }
        },
        
        // 点击授权
        async onAuthorizefn(){
            var root = [];
            var permissions_arr = [];
            this.AuthUserList.forEach(item => {
                var obj = new Object;
                obj.uid = item.id;
                obj.type = item.type;
                obj.is_customize = item.is_customize;
                if(!item.is_customize){
                    permissions_arr[0] = item.permissions;
                    obj.permissions = permissions_arr;
                }else{
                    obj.permissions = item.permissions;
                }
                root.push(obj);
            });
            var params = {
                folder_id: this.$store.state.listData.id, //文件夹id
                choose_list: JSON.stringify(root),
            }
            var data = await this.$https.post('sharedfile/setFolderRoles',params);
            if(data.success){
                this.$toast({
                    message:data.error
                });
                this.$emit('close');
            }else{
                this.$toast({
                    message:data.error
                })
            }
        },
        getfolderRolesNames(){
            this.RolesNames = JSON.parse(localStorage.RolesNames);
        }
    }
}
</script>
<style lang="less" scoped>
@import url(../../assets/css/filepanel/authsetbox.less);
</style>


